<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>orderPreview</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  <!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"-->
  <!--          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>-->
  <!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
  <link rel="stylesheet" th:href="@{/bootstrap.min.css}" />
  <script th:src="@{/vue.js}"></script>
</head>
<body>

<div th:insert="publicHeader"/>
<script th:src="@{/publicHeader.js}"></script>



<div class="container-fluid" id="app" style="margin-top: 180px;margin-bottom: 100px">


  <div class="container">
    <div class="row" >
      <div class="col-md-8">
        <select class="form-control" name="address" v-model="selectAddressId" @change="addressChange">
          <option v-for="address in addressList" :value="address.id">{{address.address}}  {{address.name}} {{address.tel}}</option>
        </select>
      </div>
      <div class="col-md-4">
        <button class="btn btn-primary" @click="clearAddAddressForm" data-toggle="modal" data-target="#myModal" >新增地址</button>
      </div>
    </div>
  </div>
  <br/>

  <div class="row">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <table class="table">
            <tr>
              <th>商品名称</th>
              <th>商品图片</th>
              <th>商品单价(元)</th>
              <th>购买数量</th>
              <th>小计</th>
            </tr>
            <tr v-for="product in items">
              <td v-text="product.productName" style="height:60px;line-height: 60px">商品名称</td>
              <td>
                <img :src="product.productImgsrc" style="width: 60px;height: 60px; border-radius: 50%"/>
              </td>
              <td v-text="product.productPrice" style="height:60px;line-height: 60px">商品单价</td>
              <td v-text="product.buycount" style="height:60px;line-height: 60px">购买数量</td>
              <td v-text="product.sumprice" style="height:60px;line-height: 60px">商品小计</td>
            </tr>
          </table>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <b> 总价(元): {{totalPrice}} </b>
        </div>

        <div class="col-md-6">
          <button class="btn btn-success" @click="submitOrder">提交订单</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">新增地址</h4>
        </div>
        <div class="modal-body">

          <form>

            <div class="form-group">
              <label for="address">详细地址</label>
              <input type="text" v-model="addressAddForm.address" class="form-control" id="address" placeholder="请输入详细地址">
            </div>

            <div class="form-group">
              <label for="tel">手机号</label>
              <input type="text" v-model="addressAddForm.tel" class="form-control" id="tel" placeholder="请输入手机号">
            </div>

            <div class="form-group">
              <label for="name">收件人姓名</label>
              <input type="text" v-model="addressAddForm.name" class="form-control" id="name" placeholder="请输入收件人">
            </div>

          </form>


        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" @click="addAddress">保存</button>
        </div>
      </div>
    </div>
  </div>



</div>

<script>

  console.log(".........orderPreview...........")

  new Vue({
    el: "#app"
    ,
    data: {
      productIds:[[${productIds}]],
      items:[],
      totalPrice:'0.00',
      addressAddForm:{
        address:'',
        tel:'',
        name:''
      }
      ,
      addressList:[],
      selectAddressId:-1
    }
    ,
    methods: {

      initOrderPreviewVo(){
        let vueObj = this;

        $.post("/order/allItems",{productIds: this.productIds},function (data) {
          console.log(data)

          vueObj.items = data.cartItemVoList;
          vueObj.totalPrice = data.totalPrice;

        })
      }
      ,
      addAddress(){

        console.log(this.addressAddForm)
        let vueObj = this;

        $.post("/address/add",this.addressAddForm,function (data) {

          if (data=="ok"){
            //todo 更新地址类别
            vueObj.initAddressList();
            $("#myModal").modal("hide")
          }else {
            alert(data)
          }

        })

      }
      ,
      clearAddAddressForm(){
        //新打开添加窗口时清空原有数据
        this.addressAddForm={
          address:'',
          tel:'',
          name:''
        }
      }

      ,
      initAddressList(){
        let vueObj = this;

        $.get("/address/allOfCurrentUser",function (data) {
          console.log(data)

          vueObj.addressList = data;
        })
      }
      ,
      addressChange(){
        console.log(this.selectAddressId)
      }
      ,
      submitOrder(){

        if (this.selectAddressId<1){
          alert("请先确定一个收货地址")
          return;
        }

        let params={
          productIds:this.productIds,
          addressId:this.selectAddressId
        }

        $.post("/order/createOrder",params,function (data) {
          if(data=="ok"){
            location.href="/myorder.html"
          }else {
            alert(data)
          }
        })

      }
    }
    ,

    created(){
      this.initOrderPreviewVo();
      this.initAddressList();
    }

  });


</script>


<div th:insert="publicFooter"/>
<script th:src="@{/publicFooter.js}"></script>


</body>
</html>